<template>
	<view class="page">
		<!-- <u-navbar title="我的" :is-back="false"
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar> -->
		<u-navbar title="我的" :is-back="false" :background="{
		    url: 'https://www.yplm888.com/uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png',
		    repeat: 'no'
		}"></u-navbar>
		<!-- 头部 -->
		<view class="p-3 avatar-wrap">
			<!-- 老师名字ID区域	 -->
			<view class="title-wrap">
				<u-avatar :src="userInfo.avatar" size='large' v-if="userInfo"></u-avatar>
				<u-avatar src="https://www.yplm888.com/assets/img/avatar.png" size='large' v-else></u-avatar>
				<view class="user_left">
					<text class="identity" v-if="isAdmin">
						管理员
					</text>
					<view v-if="" class="forteacher">
						<view class="name-id-wrap">
							<view class="id-wrap" v-if="userInfo.nickname">
								{{userInfo.nickname}}
								<text class="level" v-if="!isAdmin">{{userInfo.level_text}}</text>
							</view>
							<view class="id-wrap" v-else>
								<text @click="this.aashow = true">登录/注册</text>
							</view>
							<view class="vip" v-if="userInfo && userInfo.vip">
								<image class="id-wrap" style="margin-top: 20rpx;" src="https://www.yplm888.com/uploads/20240204/a7e5eb42cf904948ac6b78a150cc967a.png"
									mode="aspectFill"></image>
								<text style="width:100px;word-break:keep-all;white-space:nowrap;">{{userInfo.vip_endtime}}</text>
							</view>
						</view>
						<view class="guan-wrap" @click="attenteacher">
							<!-- <text class="guanzhu-title">关注讲师</text> -->
							<!-- <text class="guanzhu-num"> {{follows}}</text> -->
						</view>
						<u-icon @click="editmeans()" name="edit-pen-fill" class='right' color="#DC2929" size="28"></u-icon>
						<!-- <image @click="editmeans(userInfo.id)" class='right' src="../../static/mine_right.png"></image> -->
						<view class="dier">
							<view v-if="isTeacherInfo == '1'" class="teacherhome" @click="showTeacherInfo">讲师主页</view>
						</view>
					</view>
				</view>
				<!-- <view v-if="!userInfo" class="forteacher">
					<view class="name-id-wrap name-id-wrap-loginreg">
						<text @click="login()">点击登录</text>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 点击列表页 -->
		<view class="animated fast fadeIn userinfo-list" v-if="!isAdmin">
			<view class="p-3">
				<view v-for="(item,index) in list" class="" @click="mylist(item.url)" :key="index">
					<view class="" v-if="item.name!='反馈资源'||userInfo.union_level==3">
						<view class="" v-if="item.name!='班级管理培训课'||userInfo.union_level >= 2">
							<view class="my-item" v-if="item.name!='加油站'||(userInfo?userInfo.union_level >= 1:false)">
								<image class="userinfo-icon-img" :src="item.iamge" mode="aspectFill"></image>
								<view class="userinfo-title-txt">{{item.name}}</view>
								<!-- <view class="content" v-if="item.id == 10">{{integral}}</view> -->
								<!-- <view class="content" v-if="item.id == 11 && praisenums > 0">{{praisenums + '次'}}</view> -->
								<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
								<view class="itemline"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="animated fast fadeIn userinfo-list" v-else-if="isAdmin">
			<view class="p-3 admin-module">
				<view class="admin-item" v-for="item,index in adminList" @click="adminPage(item.url)" :key=index>
					<image :src="item.iamge" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- <view v-if="!userInfo" class="forteacher">
			<view class="name-id-wrap name-id-wrap-loginreg">
				<text @click="login()">点击登录</text>
			</view>
		</view> -->
		<u-popup v-model="aashow" mode="bottom" length="30%" border-radius="30rpx" closeable="true">
			<view style="display: flex;align-items: center;justify-content: center;height: 100%;">
				<u-button type="info" @click="login()" size="medium">授权登录</u-button>
			</view>
		</u-popup>
		<login ref="login" @user='loginUserInfo'></login>
		<!-- <u-modal v-model="messageShow" content="是否订阅续费和会员到期通知？" @confirm='messageConfirm' show-cancel-button></u-modal> -->
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import uniIcons from '@/components/uni-ui/uni-icons/uni-icons.vue';
	import login from "@/pages/components/login.vue"
	// import {
	// 	requestSubscribeMessage
	// } from '@/mixin/RSMessage.js'

	const app = getApp();

	export default {
		// mixins: [requestSubscribeMessage],
		components: {
			uniIcons,
			login
		},
		filters: {
			vipFilter(val) {
				let vip = ['普通成员', '培养组长', '带小组组长', '班长']
				return vip[val]
			},
		},
		data() {
			return {
				isResources: false, //判断资源权限
				isPermissions: false, //判断是否为运营人
				isAdmin: false, //判断是否为管理员
				messageShow: false,
				pageType: 'buyVIP',
				userInfo: '',
				user: {},
				phoneInfo: {},
				rawData: {},
				code: '',
				isTeacherInfo: '',
				list: [{
						iamge: 'https://www.yplm888.com/uploads/20240204/329c7af59028c8f72d2e02864c38b47c.png',
						name: '我的课程',
						url: '/packageB/pages/myClasses/myClasses',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/bae4fbd2ca96652e58d27ad2eeceba19.png',
						name: '签到',
						url: '/packageB/pages/signin/signin',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/d5e56f580e2881988350c7f609e027b0.png',
						name: '我的兑换券',
						url: '/packageA/pages/myExchangeCer/myExchangeCer',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/81d8faa70312a4a657b5b362ab27e8c1.png',
						name: '学习记录',
						url: '/packageB/pages/studyOrder/studyOrder',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/9623cb47f24481780c5881479339c3ec.png',
						name: '我的收藏',
						url: '/packageA/pages/myCollect/myCollect',
					},
					// {
					// 	iamge: require('@/static/images/my/3.png'),
					// 	name: '关于我们',
					// 	url: '/pages/about/banner',
					// },
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/87010cfc4858efdc5f7d4c57757a4658.png',
						name: '联系客服',
						url: '/packageB/pages/my/chat',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/ce8d336ef73cca9fe35f54d1f5ba4617.png',
						name: '反馈资源',
						url: '/packageA/pages/resources/resources',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/f2065d97833b2e495bec018f56cac863.png',
						name: '加油站',
						url: '/packageB/pages/leaderComeon',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/f2065d97833b2e495bec018f56cac863.png',
						name: '班级管理培训课',
						url: '/packageB/pages/ctComeon',
					}
				],
				adminList: [{
						iamge: 'https://www.yplm888.com/uploads/20240204/329c7af59028c8f72d2e02864c38b47c.png',
						name: '用户管理',
						url: '/packageB/pages/my/userManagement/userList',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/bae4fbd2ca96652e58d27ad2eeceba19.png',
						name: '升级会员',
						url: '/packageB/pages/signin/signin',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/d5e56f580e2881988350c7f609e027b0.png',
						name: '绑定课程',
						url: '/packageA/pages/myExchangeCer/myExchangeCer',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/81d8faa70312a4a657b5b362ab27e8c1.png',
						name: '导出会员信息',
						url: '/packageB/pages/studyOrder/studyOrder',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/9623cb47f24481780c5881479339c3ec.png',
						name: '导入资源数据',
						url: '/pages/my/resources/resourcesList',
					},
					{
						iamge: 'https://www.yplm888.com/uploads/20240204/ca3d6b586dc68038325d9756f51c7a86.png',
						name: '导入资源信息',
						url: '/packageB/pages/about/banner',
					}
				],
				favnums: 0,
				follows: 0,
				examnums: 0,
				wrongnums: 0,
				praisenums: 0,
				integral: 0,
				kongkong: false,
				default_avatar: '../../static/images/avatar.png', //默认头像	
				showMoblie: false,
				aashow:false
			}
		},
		onLoad() {
			let user = uni.getStorageSync('userinfo')
			if (user) {
				this.aashow = false;
				this.user = user
				if (this.user.level_text === '客服') {
					this.isAdmin = true
					uni.hideTabBar()
				}
			}
		},
		onShow() {
			let token = uni.getStorageSync('token')
			if (token) {
				this.getUsrInfo()
				//this.getMessageStatus()
			}

			let user = uni.getStorageSync('userinfo')
			if (!user) {
				this.aashow = true;
				// uni.showToast({
				// 	title: '请先登录'
				// })
				this.userInfo = ''
			}
		},
		watch: {
			user(val) {
				this.userInfo = val
			}
		},
		methods: {
			adminPage(url) {
				this.$u.route(url)
			},
			// 获取用户信息
			getUsrInfo() {
				this.$u.api.getUserInfo().then(res => {
					this.$store.commit('setUserInfo', res.data);
					uni.setStorageSync('userinfo', res.data);
					this.userInfo = res.data;
				})
			},
			async login() {
				let res = await this.$refs.login.login();
				this.aashow = false;
			},
			loginUserInfo(val) {
				this.user = val
				if (this.user.level_text === '客服') {
					this.isAdmin = true
					uni.hideTabBar()
				}
			},
			// 路由地址
			mylist(url) {
				let token = uni.getStorageSync('token')
				if (url == '/packageB/pages/about/banner') {
					this.$u.route(url)
					return
				}
				if (token) {
					//已登录
					this.$u.route(url)
				} else {
					uni.removeStorageSync('userinfo');
					// uni.showToast({
					// 	title: '请先登录'
					// })
					this.userInfo = '';
					this.$refs.uToast.show({
						isTab: true,
						title: '授权登录后查看',
						type: 'error'
					})
				}
			},
			attenteacher() {
				uni.navigateTo({
					url: '../attenteacher/attenteacher',
				});
			},
			// 编辑资料
			editmeans(uid) {
				// console.log(uid);
				// return false;
				// if (uid) {
					// uni.navigateTo({
					// 	url: '/packageB/pages/edit_user/edit_user?id=' + uid + '&avatar=' + this.userInfo.avatar +
					// 		'&user_nickname=' + this.userInfo.user_nickname,
					// });
				// } else {
				// 	this.$refs.uToast.show({
				// 		isTab: true,
				// 		title: '授权登录后查看',
				// 		type: 'error'
				// 	})
				// }
				
				let token = uni.getStorageSync('token');
				if (token) {
					// console.log(this.userInfo);
					// return false;
					//已登录
					uni.navigateTo({url: '/packageB/pages/edit_user/edit_user'});
				} else {
					uni.removeStorageSync('userinfo');
					this.userInfo = '';
					this.$refs.uToast.show({
						isTab: true,
						title: '授权登录后查看',
						type: 'error'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		overflow-x: hidden;
	}

	.wechat {
		width: 100%;
		height: 120rpx;
	}

	.popup {
		text-align: center;
		.pass-login-btn {
			width: 70%;
			font-size: 30rpx;
			border-radius: 40rpx;
			color: #FFFFFF;
			background-color: #FE3057;
			margin: 150rpx auto;
			width: 500rpx;
		}
	}

	.content {
		position: absolute;
		right: 100rpx;
	}

	.page {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
	}

	.dier {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 40rpx;
		margin-top: 40rpx;
	}

	.right {
		margin-left: 70rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.forteacher {
		display: flex;
		width: 100%;
		flex-direction: row;
		align-items: center;
	}

	.user_left {
		width: 75%;
	}

	.teacherhome {
		text-align: center;
		margin-top: 35rpx;
		width: 100rpx;
		height: 30rpx;
		padding-bottom: 5rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 20rpx;
	}

	.userinfo-list {
		overflow-x: hidden;
		margin: 20rpx;
		/* position: absolute; */
		/* margin-top: -30rpx; */
		box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
	}

	.title-wrap {
		display: flex;
		align-items: center;
		width: 100%;
		height: 61%;
		margin: 0 auto;
		font-size: medium;
		font-weight: bold;
	}

	.avatar-wrap {
		overflow-x: hidden;
		height: 260rpx;
		padding-top: 80rpx;
		height: 200rpx;
		background-size: 100% 100%;
	}

	.title-avatar {
		float: left;
		margin-left: 20rpx;
	}

	.name-id-wrap {
		width: 79%;
		height: 100%;
		float: left;
		position: relative;
		color: #000;
		margin-left: 20rpx;
		font-size: medium;

		.id-wrap {
			display: flex;
			font-size: 36rpx;
			align-items: bottom;

			.level {
				margin-top: 22rpx;
				color: #ccc;
				margin-left: 10rpx;
				font-size: 20rpx;
			}
		}
	}

	.name-id-wrap text:first-child {
		display: block;
		font-size: medium;
		font-weight: bold;
	}

	.name-id-wrap text:nth-child(2) {
		display: block;
		margin-top: 10rpx;
		font-weight: bold;
	}

	.name-id-wrap text:nth-child(3) {
		position: absolute;
		right: 0rpx;
		top: 30%;
		color: #FFFFFF;
		font-weight: bold;
	}

	/* 登录注册按钮 */
	.name-id-wrap-loginreg {
		// padding-left: 10rpx;
	}

	.vip {
		height: 50rpx;
		border-radius: 25rpx;
		color: #fe4469;
		line-height: 50rpx;
		font-weight: 400;
		display: flex;
		font-size: 20rpx;

		.id-wrap {
			font-size: small;
			width: 35rpx;
			height: 35rpx;
			margin-right: 20rpx;
		}
	}

	.guanzhu-title {
		font-size: small;
	}

	/* 关注教师 */
	.guan-wrap {
		width: 100%;
		height: 50rpx;
		float: left;
		margin-top: 90rpx;
		color: #FFFFFF;
		position: absolute;
		margin-left: 20rpx;
	}

	.guanzhu-title {
		font-size: small;
	}

	.guanzhu-num {
		font-size: medium;
		padding-left: 20rpx;
		padding-top: 2rpx;
	}


	.teacher-info-btn {
		display: inline-block;
		width: 130rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: transparent;
		color: #FFFFFF;
		border: 2rpx solid #FFFFFF;
		border-radius: 40rpx 40rpx;
		font-size: 20rpx;
	}

	/****** 统计区域******/
	.tongji-wrap {
		background-color: #FFFFFF;
		height: 300rpx;
		width: 90%;
		margin: 0 auto;
		position: relative;
		top: -60rpx;
		padding-top: 42rpx;
		border-radius: 18rpx;
		border: 2rpx solid #DEE2E6;
	}

	.tongji-item {
		float: left;
		height: 150rpx;
		width: 50%;
		display: flex;
		align-items: center;
	}

	.tongji-img {
		width: 100rpx;
		height: 100rpx;
	}

	.tongji-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #323232;
	}

	.tongji-it-left-wrap {
		width: 40%;
		height: 90%;
		padding: 10rpx 0 0 60rpx;
		float: left;
	}

	.tongji-it-left-wrap text {
		display: block;
	}

	.tongji-it-left-wrap .tongji-num {
		font-size: large;
		font-weight: bold;
		display: inline-block;
		color: #38DAA6;
	}

	.tongji-it-left-wrap .tongji-zi {
		display: inline-block;
		font-size: small;
		color: #38DAA6;
		margin-left: 10rpx;
	}

	.tongji-img {
		width: 52rpx;
		height: 50rpx;
		margin-left: 60rpx;
	}

	/* 个人中心下半部分文字标题 */
	.userinfo-icon-img {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	.user-bottom-icon-left {
		display: inline-block;
		width: 7%;
	}

	.user-bottom-title {
		display: inline-block;
		width: 18%;
	}

	.user-bottom-icon {
		display: inline-block;
		text-align: right;
		width: 69%;
	}

	.my-item {
		color: #323232;
		padding-left: 30rpx;
		display: flex;
		flex-direction: row;
		flex: 1;
		align-items: center;
		height: 104rpx;
		font-size: medium;

	}

	.itemline {
		position: absolute;
		/* width: 100%; */
		right: 70rpx;
		left: 100rpx;
		height: 2rpx;
		margin-top: 50rpx;
		background-color: #F5F5F5
	}

	.userinfo-title-txt {
		width: 82%;
		padding-left: 20rpx;
		font-size: medium;
	}

	button {
		/* width: 150rpx; */
		border: 0 none !important;
		outline: none !important;
		background-color: #fff !important;
	}

	button:focus {
		border: 0 none;
		outline: none;
	}

	.identity {
		border: 2rpx solid #dc2929;
		border-radius: 20rpx;
		height: 50rpx;
		color: #dc2929;
		padding: 0 10rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
	}

	.admin-module {
		display: flex;
		flex-wrap: wrap;

		.admin-item {
			width: 33%;
			height: 200rpx;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
</style>